<template>
	<view class="page order_list_page">
		<patient @info="getPatientId"></patient>
		<view class="type_list">
			<view class="type" :class="{'active':chooseTab.value == item.value}" v-for="item in typeTabs" :key="item.value"
				@click="getTab(item)">
				{{item.name}}
			</view>
		</view>
		<view class="order_info_list" v-if="list.length">
			<view class="card order_info_item" v-for="item in list" :key="item.id"
				@click="gotoPage(`/pagesCommon/order/orderDetails?id=${item.id}`)">
				<view class="order_title">
					<view class="order_item_type">
						<image class="type_icon" src="@/static/icon/order/photo-icon.png" mode="scaleToFill"
							v-if="item.orderType == 1"></image>
						<image class="type_icon" src="@/static/icon/order/mobile-icon.png" mode="scaleToFill"
							v-if="item.orderType == 2"></image>
						<image class="type_icon" src="@/static/icon/order/video-icon.png" mode="scaleToFill"
							v-if="item.orderType == 3"></image>
						<view class="type_name">
							{{item.orderTypeName || ''}}
						</view>
						<view class="doctor_type" :class="{
							blue:item.consultationSource == 1,
							yellow:item.consultationSource == 2
						}">
							{{item.consultationSourceName || ''}}
						</view>
					</view>
					<view class="order_item_status" :class="{
						gray:item.status == 5 || item.status== 6,
						yellow:item.status == 1 || item.status==4 ,
						blue:item.status == 2 || item.status == 3
					}">
						{{item.statusName}}
					</view>
				</view>
				<doctorInfo :item="{
					avatar:item.doctorAvatar,
					name:item.doctorName,
					titleName:item.titleName,
					departName:item.departName,
					levelName:item.levelName,
					hospitalName:item.hospitalName
				}"></doctorInfo>
				<view class="item_text">
					<view class="title">
						订单金额
					</view>
					<view class="text">
						￥{{item.price || 0}}
					</view>
				</view>
				<view class="item_text">
					<view class="title">
						提交时间
					</view>
					<view class="text">
						{{$getDate(item.createTime)}}
					</view>
				</view>
				<template v-if="item.status == 1">
					<view class="item_more">
						<view class="btns gray" @click.stop="deleteOrderInfo(item)">
							取消订单
						</view>
						<view class="btns">
							去支付
						</view>
					</view>
				</template>
				<template>
					<view class="item_more between">
						<view class="more">
							查看详情
							<uni-icons class="icon" type="right" size="12" color="#999"></uni-icons>
						</view>
					</view>
				</template>
			</view>
		</view>
		<view class="no_thing" v-else>
			<image class="placeholder" src="@/static/images/noting.png" mode="scaleToFill"></image>
		</view>
	</view>
</template>

<script>
	import {
		getOrderInfoPage,
		deleteOrderInfo
	} from '@/api/index.js'
	import {
		getUserInfo
	} from '@/utils/auth.js'
	export default {
		name: '',
		data() {
			return {
				list: [],
				total: 0,
				queryForm: {
					pageNo: 1,
					pageSize: 10,
					patientId: getUserInfo().id,
					status: 1
				},
				typeTabs: [{
					name: '待支付',
					value: 1
				}, {
					name: '进行中',
					value: 2
				}, {
					name: '待评价',
					value: 3
				}, {
					name: '已完成',
					value: 4
				}, {
					name: '已取消',
					value: 5
				}, {
					name: '已退款',
					value: 6
				}],
				chooseTab: {
					value: 1
				}
			}
		},
		onLoad(options) {
			this.queryForm.status = options.status || 1
			this.chooseTab.value = options.status || 1
		},
		methods: {
			getTab(item) {
				this.chooseTab = item
				this.queryForm.status = item.value
				this.pageNo = 1
				this.getOrderInfoPage()
			},
			getPatientId(value) {
				this.queryForm.patientId = value.id
				this.getOrderInfoPage()
			},
			deleteOrderInfo(item) {
				uni.showModal({
					title: '取消订单',
					content: `您是否要取消${item.id}订单`,
					success: (res) => {
						if (res.confirm) {
							deleteOrderInfo({
								id: item.id
							}).then(res => {})
						}
					}
				})
			},
			getOrderInfoPage() {
				getOrderInfoPage(this.queryForm).then(res => {
					this.list = res.data.list
					this.total = res.total
				}).catch(err => {
					console.log(err)
				})
			},
			gotoPage(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes fillWidth {
		0% {
			width: 0%;
		}

		100% {
			width: 55%;
		}
	}

	.type_list {
		padding: 30rpx 0;
		display: flex;
		align-items: center;
		overflow-y: hidden;
		overflow-x: auto;

		&::-webkit-scrollbar {
			display: none !important;
		}

		.type {
			flex: 0 0 150rpx;
			font-size: 32rpx;
			color: #333333;
			text-align: center;

			&.active {
				position: relative;
				font-weight: bold;
				color: #3C6DFE;

				&::after {
					content: "";
					position: absolute;
					left: 50%;
					bottom: -20rpx;
					transform: translate(-50%, -50%);
					width: 55%;
					height: 8rpx;
					border-radius: 100rpx;
					background-color: #3C6DFE;
					animation: fillWidth 0.25s ease;
					animation-fill-mode: forwards;
				}
			}
		}
	}

	.order_list_page {
		.order_info_list {
			.order_info_item {
				margin: 30rpx 0;

				.order_title {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 30rpx;

					.order_item_type {
						display: flex;
						align-items: center;

						.type_icon {
							width: 40rpx;
							height: 40rpx;
						}

						.type_name {
							margin: 0 20rpx;
							font-size: 30rpx;
							color: #333333;
						}

						.doctor_type {
							background-color: #F8FAFB;
							font-size: 22rpx;
							border-radius: 10rpx;
							padding: 6rpx 8rpx;
							text-align: center;

							&.blue {
								color: #3C6DFE;
								background-color: #D2DDFD;
							}

							&.yellow {
								color: #F1AE34;
								background-color: #FBECD1;
							}
						}
					}

					.order_item_status {
						text-align: right;
						font-size: 26rpx;

						&.yellow {
							position: relative;
							color: #F1AE34;

							&::after {
								content: '';
								position: absolute;
								width: 10rpx;
								height: 10rpx;
								top: 50%;
								left: -20rpx;
								transform: translate(-50%, -50%);
								background-color: #F1AE34;
								border-radius: 100%;
							}
						}

						&.blue {
							position: relative;
							color: #3f6ffe;

							&::after {
								content: '';
								position: absolute;
								width: 10rpx;
								height: 10rpx;
								top: 50%;
								left: -20rpx;
								transform: translate(-50%, -50%);
								background-color: #3f6ffe;
								border-radius: 100%;
							}
						}

						&.gray {
							position: relative;
							color: #999;

							&::after {
								content: '';
								position: absolute;
								width: 10rpx;
								height: 10rpx;
								top: 50%;
								left: -20rpx;
								transform: translate(-50%, -50%);
								background-color: #999;
								border-radius: 100%;
							}
						}
					}
				}

				.item_text {
					margin-top: 30rpx;
					display: flex;
					align-items: flex-start;
					font-size: 28rpx;

					.title {
						flex: 0 0 120rpx;
						color: #999999;
					}

					.text {
						margin-left: 20rpx;
					}

					.content {
						margin-left: 20rpx;
						background: #F8FAFB;
						border-radius: 10rpx;
						padding: 20rpx 10rpx;
					}
				}

				.item_more {
					margin-top: 30rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					font-size: 26rpx;
					color: #999999;

					.btns {
						padding: 20rpx 50rpx;
						margin-right: 30rpx;

						&:last-child {
							margin: 0;
						}

						&.gray {
							background-color: #fff;
							border: 1px solid #999999;
							color: #999;
						}
					}
				}
			}
		}
	}
</style>